﻿<html>
  <body>
    <div class="main">
      {include file='index/header'}
      <link href="/static/swiper/swiper-bundle.min.css" rel="stylesheet" />
      <style>
        .main {
          float: left;
          width: 100%;
          box-sizing: border-box;
          padding-top: 10px;
        }
        .main .content {
          float: left;
          width: 100%;
        }
        .main .section {
          float: left;
          width: 100%;
        }
        .content .img {
          width: 451px;
          height: 451px;
          float: left;
        }
        .content .img img {
          width: 100%;
        }
        .mySwiper {
          height: 20%;
          box-sizing: border-box;
          padding: 10px 0;
          margin-top: 10px;
        }

        .mySwiper img {
          display: block;
          width: auto;
          height: 100%;
        }

        .content .de {
          margin-left: 36px;
          float: left;
          width: calc(100% - 500px);
        }
        .content .de .mtit {
          font-size: 35px;
          font-family: 'AvantGarde';
          text-transform: uppercase;
          text-align: left;
          line-height: 35px;
          float: left;
          font-weight: bold;
          width: 100%;
        }
        .content .de .mtit1 {
          float: left;
          width: 100%;
          color: rgb(0, 56, 101);
          font-size: 18px;
        }
        .content .de .mlist {
          float: left;
          width: 100%;
        }
        .content .de .list {
          float: left;
          width: 100%;
          padding-top: 20px;
          padding-bottom: 20px;
        }

        .content .de .list .item {
          float: left;
          width: 50%;
          line-height: 25px;
        }
        #mark {
          padding: 10px;
          box-sizing: border-box;
        }

        #mark li {
          width: 100%;
          line-height: 30px;
        }
        .review_btn {
          float: left;
          background-color: rgb(0, 56, 101);
          padding-left: 20px;
          padding-right: 20px;
          line-height: 30px;
          height: 30px;
          font-size: 16px;
        }

        .flist {
          float: left;
          width: 100%;
          padding-top: 20px;
          padding-bottom: 20px;
        }
        .flist li {
          float: left;
          width: 100%;
        }
        .flist li .slist {
          float: left;
        }
        .flist li .slist span {
          float: left;
          line-height: 30px;
          margin-left: 30px;
        }
        .flist .m {
          width: 120px;
          text-align: center;
        }

        .mySwiper2 .swiper-slide {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
      <div class="content" style="margin-top: 30px; padding: 30px; box-sizing: border-box">
        <div class="section">
          <div class="img">
            <div
              style="--swiper-navigation-color: #000; --swiper-pagination-color: #fff; z-index: 99"
              class="swiper mySwiper2">
              <div class="swiper-wrapper">
                {foreach $infor.slider as $k=>$v}
                <div class="swiper-slide"><img src="{$v}" /></div>
                {/foreach}
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>

            <div thumbsSlider class="swiper mySwiper">
              <div class="swiper-wrapper">
                {foreach $infor.slider as $k=>$v}
                <div class="swiper-slide"><img src="{$v}" /></div>
                {/foreach}
              </div>
            </div>
          </div>
          <div class="de">
            <div class="mtit">{$infor.no}</div>
            <div class="mtit1" style="line-height: 30px; border-bottom: 2px solid rgb(0, 56, 101)">
              <span style="float: left">{$infor.ename|default=''}</span>
              <span style="float: left; margin-left: 50px">{$infor.name|default=''}</span>
            </div>
            <div class="list">{$infor.canshu|raw|default=''}</div>
            <div
              class="layui-btn review_btn"
              lay-on="page"
              style="
                float: left;
                background-color: rgb(0, 56, 101);
                padding-left: 20px;
                padding-right: 20px;
                line-height: 35px;
                height: 35px;
                font-size: 16px;
              ">
              More Info
            </div>
          </div>
        </div>
      </div>

      <script language="javascript" src="/static/swiper/swiper-bundle.min.js"></script>
      <script>
        var layer = layui.layer;
        var util = layui.util;
        // 批量事件
        util.on('lay-on', {
          page: function(){
            layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
              $.post('/index/index/check_pass',{id:{$infor.id|default=0},pass:pass},function(res){
                if (res.code=="y") {
                  layer.close(index);
                  layer.open({
                    id:'mark',
                    type: 1,
                    area: ['80%', '400px'], // 宽高
                    content:  {$infor.pcanshu|json_encode|raw|default=""},
                  // content: '<li>货号 : {$infor.hno|default=""}</li><li>生产厂家 : '+res.company+'</li></li>价格 : '+res.price+'</li>'
                  });
                } else {
                  layer.msg('密码错误');
                }
              })
            });
          }
        })
      </script>
      <script>
        var swiper = new Swiper('.mySwiper', {
          spaceBetween: 10,
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true
        })
        var swiper2 = new Swiper('.mySwiper2', {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          thumbs: {
            swiper: swiper
          }
        })
        $(document).on('mouseover', '.mySwiper2', function (e) {
          $('.mySwiper2 ').css('transform', 'scale(1.5)').css('right', '-100px')
        })

        $(document).on('mouseout', '.mySwiper2', function (e) {
          $('.mySwiper2').css('transform', 'scale(1)').css('right', '0px')
        })
      </script>
    </div>
  </body>
</html>
